<template>
  <div class="strihp-right-box">
    <!-- 最顶上的一行单独成栏，方便动画的制作 -->
    <div class="top-bar" :style="{ background: getBgColor }">
      <div class="top-bar-inner" :style="{ background: getInnerColor }">
        <span>{{ getTopActivity }}</span>
        <icon
          @click="listShowController"
          iconClass="sanjiao3"
          :class="{ triangleActive: iconActive }"
          style="color: #fff; width: 20px; height: 30px; cursor: pointer"
          id="sanjiao2"
        ></icon>
      </div>
    </div>
    <!-- 控制二级列表是否开启 -->
    <div v-if="middleListShow" class="middle-box">
      <transition-group
        name="list"
        tag="div"
        appear
        v-on:before-enter="beforeEnter"
        v-on:after-enter="afterEnter"
      >
        <!-- 中心盒子动态加载类名 -->
        <div
          class="middel-box-item"
          v-for="(item, index) in getActivityList"
          :key="index"
          :data-index="index"
          :class="middleBoxName + (index + 1)"
        >
          <div class="middel-box-inner" :class="middleInnerName + (index + 1)">
            <span>{{ item }}</span>
            <icon
              iconClass="sanjiao3"
              @click="showItemList(index)"
              style="color: #fff; width: 20px; height: 30px; cursor: pointer"
              id="sanjiao2"
            ></icon>
          </div>
        </div>
      </transition-group>
    </div>
    <transition name="list" appear v-else>
      <activity :activityContent="getTopActivity" />
    </transition>
    <div class="footer-bar" :style="{ background: getBottomColor }"></div>
  </div>
</template>

<script>
import { mapState } from "vuex";
// 导入活动组件
import activity from "../../../components/Activity.vue";
// 引入数据
import { getMessage } from "../../../data/activity";
export default {
  name: "HomeStrihpRight",
  computed: {
    // 下面两个函数是处理Vuex的引入与响应式
    ...mapState({
      rulerIndex: (state) => state.ruler.index,
    }),
    rulerIndexMap() {
      return this.rulerIndex;
    },
    // 获取需要进行列表渲染的数组(删除第一个数据)
    getActivityList() {
      return this.activityList.slice(1, this.activityList.length);
    },
    // 控制icon是否显示
    iconActive() {
      return !this.middleListShow;
    },
    // 控制box顶部名称的变化
    getTopActivity() {
      if (this.middleListShow) {
        return this.activityList[0];
      }
      return this.topActivity;
    },
    // 修改顶部div颜色
    getBgColor: function () {
      const map = new Map([
        [1, "rgba(19, 46, 140,0.4)"],
        [2, "rgba(184, 40, 39, 0.4)"],
        [3, "rgba(219, 143, 99,0.4)"],
      ]);
      let index = this.$store.state.ruler.index;
      if ([1, 2, 3].indexOf(index) == -1) {
        return this.topBgColor;
      }
      this.topBgColor = map.get(this.$store.state.ruler.index);
      return this.topBgColor;
    },
    // 修改顶部inner div的样式
    getInnerColor: function () {
      const map = new Map([
        [1, "rgba(34, 65, 153,0.6)"],
        [2, "rgba(219, 53, 58, 0.6)"],
        [3, "rgba(245, 170, 101, 0.6)"],
      ]);
      let index = this.$store.state.ruler.index;
      if ([1, 2, 3].indexOf(index) == -1) {
        return this.topInnerColor;
      }
      this.topInnerColor = map.get(index);
      return this.topInnerColor;
    },
    // 修改底部 ruler 的样式
    getBottomColor: function () {
      const map = new Map([
        [1, "rgba(81, 90, 135, 0.8)"],
        [2, "rgba(218, 125, 134, 0.8)"],
        [3, "rgba(236, 192, 125, 0.8)"],
      ]);
      let index = this.$store.state.ruler.index;
      if ([1, 2, 3].indexOf(index) == -1) {
        return this.bottomColor;
      }
      this.bottomColor = map.get(index);
      return this.bottomColor;
    },
  },
  created() {
    // 跳转后根据Vuex里的索引修改对应主题
    this.activityList = getMessage(this.$store.state.ruler.index);
    this.topActivity = this.activityList[0];
    this.initColorStyle(this.$store.state.ruler.index);
  },
  watch: {
    // 监听vuex中的状态来执行对应的过渡函数
    // 每个PageInit表示第二个页面每个颜色状态变化时执行的函数
    rulerIndexMap(newData, oldData) {
      this.initColorStyle(newData);
      this.activityList = getMessage(newData);
      this.topActivity = this.activityList[0];
    },
  },
  data() {
    return {
      // 动态类名加载要用到的基本类名
      middleBoxName: "middel-box-item",
      middleInnerName: "middel-box-inner",
      // 数组数据
      activityList: "",
      // 中间的一级列表是否展示
      middleListShow: true,
      // 初始的顶部名称
      topActivity: "",
      // 以下三个分别为顶部，inner，底部 div 的颜色
      topBgColor: "rgba(19, 46, 140,0.4)",
      topInnerColor: "rgba(34, 65, 153,0.6)",
      bottomColor: "rgba(81, 90, 135, 0.8)",
      // 二级菜单数据
      innerList: [],
    };
  },
  components: {
    activity,
  },
  methods: {
    //列表进入前的钩子
    beforeEnter: function (el) {
      el.style.opacity = 0;
      el.style.animationDelay = el.dataset.index * 0.5 + "s";
    },
    // 列表进入以后的钩子
    afterEnter: function (el) {
      el.style.opacity = 1;
    },
    // 点击除第一个外的按钮后显示列表
    showItemList(index) {
      this.topActivity = this.activityList[index + 1];
      this.innerList = this.activityList[index + 1].activity;
      this.listShowController();
    },
    // 一二级列表的控制
    listShowController() {
      this.middleListShow = !this.middleListShow;
      if (this.middleListShow) {
        // 还原顶部的对应信息
        this.topActivity = this.activityList[0];
      }
    },
    // 下面是三种主题的初始化
    FirstPageInit() {
      this.$store.commit("ruler/colorChange", "rgba(37,62,130,0.9)");
      this.middleBoxName = "middel-box-item";
      this.middleInnerName = "middel-box-inner";
    },
    SecondPageInit() {
      this.$store.commit("ruler/colorChange", "rgba(192,72,81,0.9)");
      this.middleBoxName = "middel-box-item-red";
      this.middleInnerName = "middel-box-inner-red";
    },
    ThirdPageInit() {
      this.$store.commit("ruler/colorChange", "rgba(235,180,113,0.7)");
      this.middleBoxName = "middel-box-item-yellow";
      this.middleInnerName = "middel-box-inner-yellow";
    },
    // 对于选择初始化的主题
    initColorStyle(data) {
      const storeRulerArray = [
        [1, "FirstPageInit"],
        [2, "SecondPageInit"],
        [3, "ThirdPageInit"],
      ];
      const map = new Map(storeRulerArray);
      map.get(data) && this[map.get(data)]();
    },
  },
};
</script>

<style lang="less" scoped>
// 引入颜色主体
@import "../../../themes/strihpThemes/blueThemes.less";
@import "../../../themes/strihpThemes/redThemes.less";
@import "../../../themes/strihpThemes/yellowThemes.less";

// 这部分是过渡所需要的类名
@keyframes animat {
  0% {
    margin-left: 300px;
    opacity: 0;
  }
  100% {
    margin-left: 0;
    opacity: 1;
  }
}

.list-item {
  /* display: inline-block; */
  margin-right: 10px;
}

.list-enter-active,
.list-leave-active {
  transition: all 0.5s;
}

.list-enter-active {
  animation: animat 1s;
}

.list-leave-active {
  animation: animat 1s reverse;
}

.list-enter,
.list-leave-to {
  opacity: 0;
}
// 过渡的公共类
.transfrom-class {
  transition: 0.75s;
}
.triangleActive {
  .transfrom-class();
  transform: rotate(90deg);
}
// 字体的公共类名
.font-style {
  font-size: 24px;
  color: white;
}
.strihp-right-box {
  position: relative;
  width: 100%;
  height: 100vh;
}
.middel-box-inner {
  transition: all 0.75s;
}
// 顶部盒子
.top-bar {
  width: 100%;
  height: 80px;
  background-color: rgba(46, 92, 219, 0.4);
  display: flex;
  justify-content: flex-end;
  .top-bar-inner {
    width: 85%;
    height: 80px;
    background-color: rgba(46, 92, 219, 0.6);
    .font-style();
    display: flex;
    align-items: center;
    span {
      margin-left: 60px;
      margin-right: 24px;
    }
  }
}
// 底部盒子
.footer-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background-color: rgba(81, 90, 135, 0.8);
}
@media screen and (max-width: 480px) {
  .middle-box,
  .top-bar {
    div {
      padding: 0px !important;
      width: 100% !important;
    }
  }
  .middel-box-inner {
    span {
      margin-left: 60px !important;
    }
  }
}
</style>
